<script setup lang="ts">
import CellParentInfo from '@/components/ProCell/CellParentInfo.vue'
import { StudentApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'

defineOptions({ name: 'Parent' })

const userStore = useUserStore()
const queryForm = reactive<StudentApi.StudentQuery>({
  keyword: undefined,
  source: undefined,
  status: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => StudentApi.getStudentPage({ ...queryForm, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '基本信息',
    slotName: 'name',
    width: 120,
    fixed: 'left',
  },
  { title: '手机号', dataIndex: 'parentPhone', slotName: 'parentPhone', width: 160 },
  { title: '学生姓名', dataIndex: 'status', slotName: 'status' },
  { title: '推荐人', dataIndex: 'birthdate', slotName: 'birthdate', ellipsis: true, tooltip: true },
  { title: '上次登录时间', dataIndex: 'schoolYear', slotName: 'schoolYear', ellipsis: true, tooltip: true },
  { title: '账号', dataIndex: 'source', slotName: 'source', ellipsis: true, tooltip: true },
  { title: '状态', dataIndex: 'recommender', slotName: 'recommender', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 100,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:student:write']),
  },
]

// 删除
const onDelete = (item: StudentApi.StudentResp) => {
  return handleDelete(() => StudentApi.removeStudent(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}
</script>

<template>
  <ProPage title="家长账号" description="对家长账号进行统一管理">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.keyword" placeholder="根据姓名、拼音、手机号模糊查询" allow-clear style="width: 300px;" @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <!-- <template #toolbar-right>
        <a-button v-permission="['education:student:write']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus />
          </template>
          <span>添加学员</span>
        </a-button>
      </template> -->
      <template #name="{ record }">
        <CellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.name" is-link />
      </template>
      <template #gender="{ record }">
        <CellGender :gender="record.gender" />
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #parentPhone="{ record }">
        <CellParentInfo :name="record.parentName" :phone="record.parentPhone" :relation="record.parentRelation" />
      </template>

      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:org:manage']" status="danger" @click="onDelete(record)">
            详情
          </a-link>
          <a-link v-permission="['system:org:manage']" status="danger" @click="onDelete(record)">
            重置密码
          </a-link>
        </a-space>
      </template>
    </ProTable>
  </ProPage>
</template>

<style lang="less" scoped></style>
